<template>
    <div class="content-wrap" id="wrap">
        <div class="mask-layer">{{currentTime}}</div>
        <el-image style="width: 100%; height: 100%" :src="src" fit="fill" usemap="#Map" id="qw"></el-image>
        <map name="Map" id="Map">
            <area shape="rect" coords="876,242,920,277" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="946,241,985,275" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="880,297,920,335" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="939,296,995,327" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="963,338,997,374" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="839,401,879,439" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="977,401,1017,433" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="776,431,820,468" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="1074,433,1117,468" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="810,549,855,585" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="921,577,964,613" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="1045,544,1088,578" href="javascript:void(0)" @click="showVideo()" />
            <area shape="rect" coords="925,656,965,685" href="javascript:void(0)" @click="showVideo()" />
        </map>

        <el-dialog title="监控画面" :visible.sync="dialogVisible" @close="closeDialog">
            <video id="videoPlayer"  loop autoplay  width="100%">
                <source :src="videoUrl" type="video/mp4">
            </video>
            <span slot="footer" class="dialog-footer"></span>
        </el-dialog>
    </div>
</template>
<script>
const moment = require("moment");
console.log(document.getElementById("videoPlayer"));
export default {
    name: 'SecurityMonitor',
    data() {
        return {
            currentTime : '',
            src: require('../../../../public/img/SecurityMonitor.jpg'),
            dialogVisible : false,
            videoUrl : "https://view.2amok.com/20220225/59853cb30810feff6d2fc3b1f29abf79.mp4",
        };
    },
    created() {},
    mounted() {
        this.updateTime();
        /*var test = document.getElementById('wrap');
        test.onmousemove = function (e) {
            var x = e.layerX;
            var y = e.layerY;
            e.target.title = 'X is ' + x + ' and Y is ' + y;
        };*/
    },
    methods: {
        updateTime : function (){
            let _that = this;
            setInterval(function(){
                _that.currentTime = moment().format("YYYY年MM月DD日 HH:mm:ss");
            } , 1000);
        },
        showVideo : function (){
            let player = document.getElementById("videoPlayer");
            if(player){
                player.play();
            }
            this.dialogVisible = true;
        },
        closeDialog : function (){
           document.getElementById("videoPlayer").pause();
           this.dialogVisible = false;
        }
    }
};

</script>
<style lang="scss" scoped>
.content-wrap {
    margin: 50px;
    width: 1722px;
    height: 795px;
    position: absolute;
}
.mask-layer{
    font-family: "微軟正黑體 Light";
    color: #FFFFFF;
    background-color: #363543;
    width: 280px;
    min-height: 50px;
    line-height: 36px;
    position: absolute;
    z-index: 10;
    right: 245px;
    top: 93px;
    letter-spacing: 3px;
    padding-top: 18px;
    text-align: right;
}
</style>
